<template>
    <w-tab-list  @clear-search="clearSearch(true)"
                 @clear-selection="clearSelection"
                 @refresh-data="refreshData(true)"
                 @switch-page="switchPage"
                 @search-active="searchActive"
                 @delete-batch="deleteBatch"
                 @open-add-from="insert"
                 :total="paging.total"
                 :page-size="paging.pageSize"
                 :frame="false"
    >
        <template #searchItem>
            <ul style="float:left;">
                <li>
                    角色名称：<el-input type="text" placeholder="roleNameCh" class="sh" v-model="search.nameCh"/>
                </li>
                <li>
                    权限字符：<el-input type="text" placeholder="roleName" class="sh" v-model="search.name"/>
                </li>
                <li>
                    状态：<el-select v-model="search.status" placeholder="角色状态" clearable>
                    <el-option label="启用" :value="1"/>
                    <el-option label="未启用" :value="0"/>
                </el-select>
                </li>
                <li>
                    创建时间：<el-date-picker v-model="search.date" type="daterange" size="default" start-placeholder="start" end-placeholder="end" clearable class="picker"/>
                </li>
            </ul>
        </template>
        <!--        <template #operationBar></template>-->
        <template #batchOperationItem>
            <el-button :disabled="selection.length>1" :icon="Edit" @click="batchEdit">编辑</el-button>
        </template>
        <template #dataList>
            <el-table stripe :data="roleData" @selection-change="saveSelection" header-row-class-name="header-class" ref="roleTable" id="table">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="角色编号" width="90" align="center"/>
                <el-table-column prop="roleNameCh" label="角色名称">
                    <template #default="s">
                        <template v-if="s.row.editable">
                            <el-input v-model="s.row.roleNameCh"/>
                        </template>
                        <template v-else>
                            {{s.row.roleNameCh}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="roleName" label="权限字符">
                    <template #default="s">
                        <template v-if="s.row.editable">
                            <el-input v-model="s.row.roleName"/>
                        </template>
                        <template v-else>
                            {{s.row.roleName}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="显示顺序">
                    <template #default="s">
                        <template v-if="s.row.editable">
                            <el-input-number
                                    :min="0"
                                    v-model="s.row.sort"
                                    controls-position="right"
                            />
                        </template>
                        <template v-else>
                            {{s.row.sort}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.enabled"
                                   :active-value="1"
                                   :inactive-value="0"
                                   active-text="正常"
                                   inactive-text="停用"
                                   :before-change="switchEnabled"
                                   @change="enableChange($event,scope.row)"
                                   active-color="#13ce66"
                                   inactive-color="#ff4949"
                                   size="small"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"/>
                <el-table-column label="Operator" width="200">
                    <template #default="s">
<!--                        <template v-if="s.row.editable">-->
<!--                            <el-button type="text" size="small" @click="saveEdit(s.row)" :icon="Picture">保存</el-button>-->
<!--                            <el-button type="text" size="small" @click="cancelEdit(s.row)" :icon="Failed">取消</el-button>-->
<!--                        </template>-->
<!--                        <template v-else>-->
                            <el-button type="text" size="small" @click="edit(s.row)" :icon="Edit">编辑</el-button>
                            <el-button type="text" size="small" @click="remove(s.row)">删除</el-button>
                            <el-button type="text" size="small" :icon="DArrowRight">更多</el-button>
<!--                        </template>-->
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </w-tab-list>

</template>

<script>
    import {Search,Refresh,RefreshRight,CollectionTag,Delete,Plus,Edit,DArrowRight,Picture,Failed} from '@element-plus/icons-vue'
    import {ElMessage} from 'element-plus'
    import WTabList from "../com/WTabList.vue";

    export default {
        name: "MenuTemplate",
        components:{
            WTabList
        },
        setup(props){
            return{
                Search,
                Refresh,
                RefreshRight,
                CollectionTag,
                Delete,
                Plus,
                Edit,
                DArrowRight,
                Picture,
                Failed
            }
        },
        data(){
            return{
                roleData: [
                    {
                        enabled:'1',
                        createTime:'2',
                        updateTime:'3'
                    }
                ],
                selection: [],
                paging:{
                    total: 100,//记录总数
                    pageSize: 9,//每页记录数
                    pageNum: 1,//当前页码
                    pagerCount: 8,//最大页码按钮数，限定在(5 ≤ x ≤ 21 的奇数)
                },
                search:{
                    name: null,
                    nameCh: null,
                    status: null,
                    date: null,
                },
                cacheRow: null
            }
        },
        methods:{
            /*1、搜索框管理*/
            //搜索执行函数
            searchActive(){
                this.$utils.searchActive({
                    data: this.search,
                    initData: this.$options.data.call(this).search,
                    executeFn:()=>{
                        this.loadRolesPageInfoReq();
                    }
                })
            },
            //清空搜索框
            clearSearch(hint){
                this.$utils.resetSearchParams({
                    initData: this.$options.data.call(this).search,
                    data: this.search,
                    hint: hint,
                    callback: ()=>{
                        this.loadRolesPageInfoReq();
                    }
                });
            },
            /*2.数据操作*/
            //编辑记录
            edit(row){
                row.editable = true;
                this.cacheRow = this.$utils.clone(row);
            },
            //取消编辑
            cancelEdit(row){
                Object.assign(row,this.cacheRow)
                row.editable = false;
            },
            //批量编辑
            batchEdit(){
                this.selection.forEach(s=>{
                    s.editable = true;
                })
            },
            remove(id){
                console.log('删除角色无')
            },
            //保存修改
            saveEdit(row){
                // this.$operate.update({
                //     title: '修改角色',
                //     executeFn:()=>{
                //         updateRole(row).then(data=>{
                //             this.$response.handle({
                //                 data: data,
                //                 success: '修改成功',
                //                 error: '修改失败',
                //                 successFn:()=> {
                //                     this.loadRolesPageInfoReq();
                //                 }
                //             })
                //         })
                //     },
                //     cancelFn:()=>{
                //         Object.assign(row,this.cacheRow);
                //     }
                // })
            },
            //修改角色状态
            switchEnabled(){
                return this.$operate.switchStatus({
                    title: '修改用户状态',
                    hint: '你确认要更改该用户状态吗'
                });
            },
            //修改角色状态执行
            enableChange($event,row){
                console.log('val',$event);
                console.log('id',row.id)
                // await updateRole({
                //     id: row.id,
                //     enabled: $event
                // }).then(data=>{
                //    this.$response.handle({
                //        data:data,
                //        success: '修改成功',
                //        error: '修改失败'
                //    })
                // })
            },
            /*3.分页管理*/
            //切换页面
            switchPage(index){
                this.paging.pageNum = index;
                this.loadRolesPageInfoReq();
            },
            /*4.对话框管理*/
            //打开新增对话框
            insert(){
                let frm = this.$refs.roleForm;
                frm.visible = true;
            },
            /*5.表格管理*/
            //刷新表格数据
            refreshData(hint){
                // this.loadRolesPageInfoReq(hint);
            },
            //保存用户选中行数据
            saveSelection(selection){
                this.selection = selection;
            },
            clearSelection(){
                // this.$refs.roleTable.clearSelection();
            },
            /*6.数据加载项*/
            loadRolesPageInfoReq(hint){

            },
            init(){
                this.loadRolesPageInfoReq();
            }
        },
        created() {
            this.init();
        }
    }
</script>

<style scoped>
    .tab-list{
        height: 99%;
    }
    .sh{
        width: 180px;
    }
    .el-select-dropdown__item{
        width: 100%;
        color: darkgray;
    }
    .el-select{
        width: 120px;
    }
</style>
